<template>
	<div>
		<h1>Hello App!</h1>
		<toptitle></toptitle>
		<p>
			<!-- 使用 router-link 组件来导航. -->
			<!-- 通过传入 `to` 属性指定链接. -->
			<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			
			<router-link to="/about">Go to about</router-link>
			<router-link to="/home">Go to home</router-link>
		</p>
		<!-- 路由出口 -->
		<!-- 路由匹配到的组件将渲染在这里 -->
		<router-view></router-view>
	</div>
</template>

<script>
	import toptitle from './components/toptitle'

	export default {
		data () {
			return {
				msg: 'Hello Vue!'
			}
		},
		components: { toptitle }
	}
</script>

<style>
	body {
		background-color: #f7f8f9;
	}
</style>